@import '../../../style/var.scss';

.order-detail {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 1;
    background-color: #F7F7F7;
}

.mask {
    @include mask(10);
}

.order-status {
    padding: 25px 28px 0;
    width: 100%;
    height: 160px;
    background: rgba(248, 161, 32, 1);

    .top,
    .bottom {
        display: flex;
        justify-content: space-between;
    }

    .top {
        margin-bottom: 16px;

        view {
            font-size: 30px;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
        }
    }

    .bottom {
        view {
            font-size: 24px;
            color: rgba(255, 255, 255, 1);
        }
    }
}

.user-wrapper {
    padding: 28px 23px 0;
    margin: -30px auto 20px;
    width: 702px;
    height: 134px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);

    .user-info {
        display: flex;
        margin-bottom: 20px;

        .username,
        .tel {
            white-space: nowrap;
            font-size: 30px;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
        }

        .username {
            margin-right: 40px;
            max-width: 300px;
            @include oneRowOmit;
        }
    }

    .address-info {
        width: 100%;
        font-size: 26px;
        font-weight: bold;
        color: rgba(176, 176, 176, 1);
        @include oneRowOmit;
    }
}

.goods-wrapper {
    padding: 28px 26px;
    margin: 0 auto 20px;
    width: 702px;
    // height: 364px;
    background-color: #fff;

    .top {
        margin-bottom: 19px;
        display: flex;
        justify-content: space-between;
        .goods-number, .time {
            font-size: 30px;
            color: rgba(5, 14, 37, 1);
        }
    }

    

    .goods-detail {
        margin-bottom: 22px;
        padding: 24px 0;
        display: flex;
        border-bottom: 1px solid #f0f0f0;
        border-top: 1px solid #f0f0f0;

        .goods-image {
            margin-right: 17px;
            width: 166px;
            height: 166px;
        }

        .goods-info {
            flex: 1;
            height: 166px;
            line-height: 1;

            .goods-name {
                margin: 6px 0 17px;
                width: 100%;
                font-size: 30px;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
                @include oneRowOmit;
            }

            .goods-desc {
                margin-bottom: 50px;
                width: 100%;
                font-size: 26px;
                line-height: 30px;
                font-weight: 300;
                color: rgba(176, 176, 176, 1);
                @include oneRowOmit;
            }

            .goods-specification {
                display: flex;
                justify-content: space-between;
                width: 100%;

                .goods-number {
                    font-size: 26px;
                    color: rgba(176, 176, 176, 1);
                }

                .goods-price {
                    font-size: 30px;
                    font-weight: bold;
                    color: rgba(46, 46, 46, 1);
                }
            }
        }
    }

    .should-pay {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;

        .text,
        .money {
            font-size: 30px;
            font-weight: bold;
            color: rgba(5, 14, 37, 1);
        }
    }
}

.order-info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 24px 26px;
    margin: 0 auto;
    width: 702px;
    height: 114px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);

    .content {
        font-size: 24px;
        color: rgba(5, 14, 37, 1);
    }
}

.order-opt {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 24px;
    width: 750px;
    height: 100px;
    background: rgba(255, 255, 255, 1);

    .opt-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        width: 160px;
        height: 60px;
        font-size: 26px;
        border: 1px solid rgba(38, 38, 38, 1);
        color: rgba(38, 38, 38, 1);
    }

    .to-pay,
    .check-order {
        border: none;
        background-color: #F8A120;
        color: #FFFFFF;
    }
}

.cancle-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 800px;
    width: 100%;
    z-index: 11;
    background-color: #FBFBFB;

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        width: 100%;
        height: 90px;

        .left,
        .right {
            font-size: 34px;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
        }
    }

    .tips {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        padding-left: 27px;
        font-size: 24px;
        color: rgba(176, 176, 176, 1);
        background-color: #F5F5F5;
    }

    .cancle-reason-list {
        position: relative;
        padding: 32px 22px;
        width: 100%;
        height: 650px;
        overflow: auto;

        .item {
            display: flex;
            align-items: center;
            margin-bottom: 64px;

            .circle {
                position: relative;
                margin-right: 21px;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                border:2px solid rgba(153,153,153,1);
                background-color: #fff;

                &.active {
                    &::after {
                      content: '√';
                      position: absolute;
                      top: 0;
                      left: 0;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 100%;
                      height: 100%;
                      font-size: 20px;
                      border: none;
                      border-radius: 50%;
                      background-color: #000;
                      color: #fff;
                    }
                }
            }

            .reason {
                font-size: 28px;
                color: rgba(38, 38, 38, 1);
            }
        }
    }
}
